<template>
	<div id="app">
		<div class="login">
			<img src="../assets/logo.png" />
			<!-- 表单 -->
				<div>
					<el-form :model="form"  :rules="rules" label-width="0px" ref="ve">
					  <el-form-item prop="username" >
					    <el-input 
						  prefix-icon="el-icon-s-custom"
						  v-model="form.username"
						  placeholder="请输入用户名"
						  >
						  </el-input>
					  </el-form-item>
						  <el-form-item prop="password">
						    <el-input
							 prefix-icon="el-icon-unlock"
							  v-model="form.password"
							  type="password"
							  placeholder="请输入密码"
							 ></el-input>
						  </el-form-item>
						  <el-form-item class="button" >
						     <el-button type="primary" @click="login">登录</el-button>
							 <el-button type="info" @click="reset('ve')">重置</el-button>
						  </el-form-item>
							</el-form>

				</div>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				form:{
					username:"admin",
					password:'123456'
				},
				 rules: {
				          username: [
				            { required: true, message: '请输入用户名', trigger: 'blur' },
				            { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
				          ],
						  password:[
							  { required: true, message: '请输入密码', trigger: 'blur' },
							  { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
						  ]
						  }
			}
		},
		methods:{
			//表单重置
			reset(e){
				console.log(this)
				this.$nextTick(() => {
				          this.$refs[e].resetFields();
				        });
						this.form.username =''
						this.form.password = ''
			},
			//登录方法
			login(){
				this.$refs.ve.validate( res =>{
					if(res){
					axios.post(this.serve +'login',this.form).then(res=>{
							if(res.status ===200){
								console.log(res)
								if (res.data.meta.status !=200) return  this.$message.error('登录失败');
								 this.$message({
								          message: '登录成功',
								          type: 'success'
								        });
										sessionStorage.setItem("key", JSON.stringify(res.data)); //本地存储需要转换成字符串
										this.$router.push('/home')

							}
						})
					}else{
						return alert('用户名或密码错误')
					}
				})
				
			}
		}
	}
</script>

<style lang="less" scoped>
	html,body{
		width: 100%;
		height: 100%;
		padding: 0;
		margin: 0;
	}
	#app{
		width: 100%;
		height: 100%;
		background-color: cornflowerblue;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;
	}
	.login{
		background-color: #fff;
		width: 500px;
		height: 300px;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		img{
			width: 150px;
			height: 150px;
			padding: 10px;
			top: -50px;
			position: relative;
			background-color: #fff;
			border-radius: 50%;
		}
		div{
			width: 300px;
			position: relative;
			top: -15px;
			
		}
	}
	.button{
		display: flex;
		justify-content: flex-end;
	}
</style>
